<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSS盒子模型示例</title>
   <style>
       .container {
           margin: 50px;
           padding: 20px;
           border: 2px solid #333;
           background-color: #f5f5f5;
       }
       
       .box {
           width: 200px;
           height: 150px;
           padding: 20px;
           border: 5px solid #666;
           margin: 20px;
           font-family: Arial, sans-serif;
           text-align: center;
           line-height: 150px; /* 与height一致，实现单行文本垂直居中 */
           font-weight: bold;
       }
       
       .standard-box {
           background-color: #a8d1ff;
       }
       
       .border-box {
           background-color: #ffcca8;
           box-sizing: border-box; /* 启用IE盒子模型 */
       }
       
       .box-with-margin {
           background-color: #c8ffc8;
           margin: 40px; /* 更大的外边距 */
       }
       
       .box-without-padding {
           background-color: #ffc8e6;
           padding: 0; /* 移除内边距 */
       }
       
       .explanation {
           margin: 20px;
           padding: 10px;
           font-family: Arial, sans-serif;
       }
   </style>
</head>
<body>
   <div class="container">
       <h2>CSS盒子模型示例</h2>
       
       <div class="explanation">
           <p>下面两个盒子都设置了相同的width(200px)和height(150px)，但展示效果不同：</p>
       </div>
       
       <div class="box standard-box">标准盒子模型</div>
       <div class="box border-box">IE盒子模型 (border-box)</div>
       
       <div class="explanation">
           <p>下面展示不同内边距和外边距的效果：</p>
       </div>
       
       <div class="box box-with-margin">更大的外边距</div>
       <div class="box box-without-padding">无内边距</div>
   </div>
</body>
</html>